<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-20 u-card-box">
			<view class="u-m-l-10 u-m-b-30 u-font-30 u-font-bold">{{title}}，我们会尽快与您联系</view>
			<view class="u-flex u-flex-wrap">
				<view :class="item.check ? 'check_tag' : 'noCheck_tag'" v-for="item in feedbackList" :key="item.id" @click="onCheckType(item)">{{item.name}}</view>
			</view>
			<u-input type="textarea" :custom-style="textareaStyle" :clearable="false" :placeholder="desc"
				height="194" maxlength="2000" v-model="remark"></u-input>
			<view class="u-m-t-20 u-flex u-row-between u-col-bottom">
				<u-upload :action="action" :show-progress="false" :max-count="4" image-mode="widthFix" width="120"
					height="120" @on-success="onImageSuccess" @on-remove="onImageRemove"
					:before-upload="beforeUpload"></u-upload>
				<view>{{imageList.length}}/4</view>
			</view>
		</view>
		<Bottom :btnText="'提交意见'" @confirm="onSubmit"></Bottom>
		
		<!-- 通用提示框 -->
		<Modal :show="modalData.show" :modalContent="modalData.content" :showCancel="modalData.showCancel" @confirm="onModalConfirm"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import env from '@/network/env.js'
	import {
		addFeedback,
		feedbackAllType,
		addCooperate
	} from '@/network/api.js'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				textareaStyle: {
					background: '#F3F4F6',
					borderRadius: '20rpx',
					padding: '20rpx'
				},
				remark: '',
				tea_id: '',
				imageList: [],
				feedbackList: [],
				type: 2, // 1 合作  2 投诉
				title: '您提交的问题',
				desc: '请描述您遇到的问题',
				action: `${env.baseUrl}/api/uploadOssImage`,
				modalData:{
					show: false,
					content: '',
					showCancel: true
				},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.tea_id = options.id
			}
			this.type = Number(options.type)
			this.onGetType(options.type)
			switch(this.type){
				case 1:
				    this.title = '您的合作需求'
					this.desc = '请描述你的合作需求'
					break;
				case 2:
				    this.title = '您提交的问题'
				    this.desc = '请描述您遇到的问题'
					break;
			}
		},
		methods: {
			async onGetType(type) {
				const res = await feedbackAllType({type:type})
				if(type == 1){
					res.data.list = res.data.list.slice(0,2)
				}
				res.data.list.map(item=>{
					if(this.tea_id && item.name == '酒局'){
						item.check = true
					}else{
						item.check = false
					}
				})
				this.feedbackList = res.data.list
			},
			onCheckType(val){
				val.check = !val.check
			},
			onImageSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onImageRemove(val) {
				this.imageList.splice(val, 1)
			},
			beforeUpload(index) {
				uni.showLoading({
					title: "上传中..."
				})
			},
			onSubmit() {
				if (this.remark) {
					const userid = uni.getStorageSync("user_id")
					const params = {
						uid: userid,
						content: this.remark,
						tea_id: this.tea_id,
						images: this.imageList.join(',')
					}
					let list = []
					this.feedbackList.map(item=>{
						if(item.check){
							list.push(item.id)
						}
					})
					params.type_id = list.join(",")
					let reqUrl = addFeedback
					if(this.type == 1) reqUrl = addCooperate
					reqUrl(params).then((res) => {
						this.modalData.content = res.msg
						this.modalData.showCancel = false
						this.modalData.show = true
					})
				} else {
					uni.showToast({
						icon: "none",
						duration: 3000,
						title: "请描述您的问题"
					})
				}
			},
			onModalConfirm(){
				if (this.tea_id) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: "/pages/mine/mine"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.type_box {
		padding: 20rpx;
		background: #F3F4F6;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: inline-block;
	}
	
	.noCheck_tag{
		padding: 16rpx 40rpx;
		background: #F4F5F7;
		color: #818695;
		border: 1rpx solid #F4F5F7;
		margin: 0 20rpx 20rpx 0;
		border-radius: 50rpx;
	}
	
	.check_tag{
		padding: 16rpx 40rpx;
		background: #fff;
		color: #FB6E1F;
		border: 1rpx solid #FB6E1F;
		margin: 0 20rpx 20rpx 0;
		border-radius: 50rpx;
	}
</style>